<template>
  <div class="container">
    <pre class="mermaid" v-if="props.MermaidVla">
        {{ props.MermaidVla }}
        </pre
    >
  </div>
</template>

<script setup lang="ts">
import mermaid from 'mermaid'; //引用mermaid
import { onMounted, ref } from 'vue';

const props = defineProps({
  MermaidVla: {
    type: String // 接收父组件传递的 MermaidVla 作为 prop
  }
});

const mermaidCode = `
graph TD
    A[开发软件汇总] --> B{Java}
    B --> C[由詹姆斯·高斯林及其团队在Sun Microsystems（后来被Oracle收购）于1995年首次发布]
    C --> D[面向对象的编程语言，设计目标是具有简单性、可移植性、性能和安全性，广泛应用于企业级开发、移动开发、Web应用、分布式应用等多个领域]

    A --> E{Python}
    E --> F[由吉多·范罗苏姆设计并发布于1991年]
    F --> G[高级、解释型、通用的编程语言，设计理念强调代码的可读性、简洁性和开发效率，广泛应用于数据分析、人工智能、Web开发、自动化脚本、科学计算等多个领域]

    A --> H{C++}
    H --> I[由比约恩·斯特劳斯特鲁普于1979年开始开发，并于1985年首次发布]
    I --> J[C++是一种通用的编程语言，在C语言的基础上发展而来的，加入了面向对象编程（OOP）的特性，可以作为一种过程化语言，也可以作为一种面向对象的语言使用。由于其高效性和灵活性，广泛应用于系统编程、游戏开发、嵌入式系统、图形渲染等领域]

    A --> K{C#}
    K --> L[由微软于2000年推出，作为.NET平台的一部分]
    L --> M[C#是一种现代化的、面向对象的编程语言，语法简洁且功能强大，支持多种编程范式，包括面向对象编程（OOP）、函数式编程、事件驱动编程等。主要用于开发Windows应用程序、Web应用程序、游戏、移动应用等领域]
  `;

onMounted(async () => {
  mermaid.initialize({ startOnLoad: false });
  await mermaid.run({
    suppressErrors: true
  });
});
</script>
